import React, { Component } from 'react'
import { Checkbox, Button, Popconfirm } from 'antd'
import './index.moudle.css'
export default class Item extends Component {
    state = {
        mouse: false
    }
    onChange = (id, event) => {
        const { updateTodo } = this.props
        updateTodo(id, event.target.checked)
    }
    handleMouse = (flag) => {
        return () => {
            this.setState({ mouse: flag })
        }
    }
    handleDelete = (id) => {
        const { deleteTodo } = this.props
        deleteTodo(id)
    }
    render() {
        const { id, name, done } = this.props
        const bgColor = this.state.mouse ? "#ddd" : "white"
        const deleteBtnDisplay = this.state.mouse ? "block" : "none"
        return (
            <div className="item"
                onMouseEnter={this.handleMouse(true)}
                onMouseLeave={this.handleMouse(false)}
                style={{ backgroundColor: bgColor }}
            >
                <Checkbox
                    onChange={(event) => this.onChange(id, event)}
                    className="item-checkbox"
                    checked={done}>
                    {name}
                </Checkbox>
                <Button type="primary"
                    danger className='delete-button'
                    style={{ display: deleteBtnDisplay }}
                >
                    <Popconfirm
                        title="确认删除么？"
                        onConfirm={() => this.handleDelete(id)}
                        okText="确认"
                        cancelText="取消"
                    >
                        删除
                    </Popconfirm>
                </Button>
            </div>
        )
    }
}
